<template>
  <view class="card">
    <view class="card-header">
      <view class="card-header-title"> {{ data.governCheckContent }} </view>
    </view>
    <view class="card-content">
      <view> {{ data.governCheckWay }} </view>
    </view>
    <view class="card-footer">
      <!-- 0符合  1不符合  2待定   默认是null -->
      <view class="card-footer-f">
        <view class="btn" v-if="data.governCheckConform === 0 || data.governCheckConform" :style="{backgroundColor:stateColor, color:colors}">
          {{ data.governCheckConform === 0 ? '符合' : data.governCheckConform === 1 ? '不符合' : data.governCheckConform === 2 ? '待定' : ''}}
        </view>
      </view>
      <view class="card-footer-r">检查时间：{{ data.governCheckTime || '无' }} </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    },
    stateColor: {
      type: String,
      default: "",
    },
    colors: {
      type: String,
      default: "",
    }
  },
  methods: {
    formatTotal(item) {
      return item.completeCount + "/" + (item.unCompleteCount + item.completeCount);
    },
    formatDate(item) {
      return item.governTaskStartTime + " 至 " + item.governTaskEndTime;
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 8upx;
  margin: 10upx 0;
  padding: 10upx 5upx;

  &-header {
    display: flex;
    justify-content: space-between;
    padding: 16upx;
    &-title {
      font-size: 26upx;
      font-weight: 550;
      color: #333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    &-state {
      font-size: 24upx;
      width: 140upx;
      height: 40upx;
      color: #000000;
      border-radius: 25upx;
      line-height: 40upx;
      text-align: center;
    }
  }

  &-content {
    font-size: 26upx;
    padding: 0 16upx;
    color: #9c9c9c;
    max-height: 64upx;
    overflow: hidden;
  }
  &-footer {
    display: flex;
    font-size: 22upx;
    padding: 16upx;
    justify-content: space-between;
    &-f {
      height: 40upx;
      
      .btn{
        padding: 0 15upx;
        border-radius: 20upx;
        line-height: 40upx;
        text-align: center;
      }
    }
    &-r {
      color: #9c9c9c;
    }
  }
}
</style>
